<template>
    <div id="divbox">
        <!-- 【此图像是圆圈头像logo】 -->
        <img src="https://i02piccdn.sogoucdn.com/e99e2538b1bf4686" alt="Your Image">
        <div class="login-form">
            <div id="logo">
                <span
                    style="display: block; font-family: 'Microsoft YaHei';letter-spacing: 0.5px; font-weight: bold; font-size: 40px; text-align: center;">
                    &nbsp; 欢迎注册
                </span>
            </div>
            <el-form :rules="rules" ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="form.account" class="input"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" class="input"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="form.checkPass" class="input" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <!-- <el-button type="primary" @click="onSubmit()" style="width: 300px;">登录</el-button> -->
                    <el-button type="primary" @click="submitForm('form')">注册</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                    <br />
                    <span style="color: #006A5A;" @click="reg()">已账号？点击登录</span>
                </el-form-item>
            </el-form>
        </div>


    </div>
</template>
  
<script>
import { register } from '@api/pagehotel'
export default {
    data() {
        return {
            form: {
                account: '',
                password: '',
                checkPass: ''
            },
            rules: {
                account: [
                    { required: true, message: '请输入账户名称！', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入账户密码！', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
                    { validator: this.validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: this.validatePass2, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        reg() {
            this.$router.push({ name: 'login' })
        },
        onSubmit() {//【登录】
            if (this.form.account.length < 3 || this.form.account.length > 10) {
                this.$message({ showClose: true, message: '账户名称长度在 3 到 10 个字符~', type: 'error' });
            } else if (this.form.password.length < 3 || this.form.password.length > 10) {
                this.$message({ showClose: true, message: '账户密码长度在 3 到 10 个字符~', type: 'error' });
            } else {
                this.$message({ showClose: true, message: '恭喜你，账户正确✔', type: 'success' });
            }
        },
        validatePass(rule, value, callback) {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.form.checkPass !== '') {
                    this.$refs.form.validateField('checkPass');
                }
                callback();
            }
        },
        validatePass2(rule, value, callback) {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    register(this.form).then(res => {
                        if (res.code) {
                            this.$message({ showClose: true, message: '恭喜你，注册成功✔', type: 'success' });
                            this.$router.push({ name: 'login' })
                        }else{
                            this.$message({ showClose: true, message: '注册失败', type: 'error' });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
  
<style>
#divbox {
    width: 100%;
    height: 100vh;
    background-image: url("https://p0.itc.cn/images01/20201229/ca023ba149a1421fb839715378987131.jpeg");
    /*将🎀页面背景  图片路径替换为你自己的图片路径*/
    background-size: cover;
    /*保持图片比例并完全覆盖元素*/
    background-position: center center;
    /*将图片居中对齐*/
}

.login-form {
    width: 442px;
    height: 400px;
    background-color: rgba(248, 242, 235, 0.5);
    position: relative;
    left: 515px;
    top: 170px;
    padding-top: 20px;


}

#logo {
    width: 100%;
    height: 60px;
    /* background-color: aquamarine; */
    margin-bottom: 40px;
}

.input {
    max-width: 300px;
}

img {
    border-radius: 50%;
    width: 100px;
    position: absolute;
    left: 680px;
    top: 50px;
}
</style>
  